<template>
<div class="store-info">
  <div class="product-details-merchant">
    <div class="product-details-merchant-top flex-start">
      <div class="shop-img"><img fit="fill"
                                 src="https://hetao-shop-test.s3.amazonaws.com/selle/2023-12-01/0b121c30-4d55-46df-92cd-e7e79fed7a83.jpg"
                                 alt="凌天店铺"></div>
      <h1>凌天店铺</h1></div>
    <div class="product-details-merchant-statistics flex-between">
      <div class="all flex-center merchant-statistics" style="width: 50%;"><h2>12</h2><span>全部商品</span></div>
      <div class="line"></div>
      <div class="follower flex-center merchant-statistics" style="width: 50%;"><h2>80</h2><span>关注</span></div>
    </div>
    <div class="flex-center merchant-statistics"><h2>10,169</h2><span>销售量</span></div>
    <button type="button" class="el-button el-button--primary is-plain"><!----><!----><span> 访问商店&gt; </span>
    </button>
  </div>
</div>
</template>
<script setup></script>
<style scoped>
.product-details .product-details-merchant-top,.productc .sc {
  align-items: center
}

.product-details .product-details-merchant-top .shop-img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px
}

.product-details .product-details-merchant-top .shop-img img {
  border-radius: 50%;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover
}

.product-details-merchant {
  margin-left: 17px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 10px
}

.product-details-merchant-top {
  padding-bottom: 17px
}

.product-details-merchant-top img {
  width: 46px;
  height: 30px;
  -o-object-fit: cover;
  object-fit: cover
}

.product-details-merchant-top h1 {
  max-width: 130px;
  font-size: 14px;
  line-height: 16px;
  color: var(--color-black);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  padding: 0 0 0 8px
}

.product-details-merchant-statistics {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border)
}

.product-details-merchant .line {
  width: 1px;
  height: 18px;
  background-color: var(--color-border)
}

.product-details-merchant .merchant-statistics {
  flex-direction: column;
  padding: 16px 0
}

.product-details-merchant .merchant-statistics h2 {
  font-weight: 700;
  font-size: 14px;
  color: var(--color-title);
  margin-bottom: 5px
}

.product-details-merchant .merchant-statistics span {
  font-weight: 400;
  font-size: 12px;
  color: var(--color-title)
}

.product-details-merchant .el-button {
  margin-bottom: 15px;
  width: 192px;
  height: 26px;
  padding: 0;
  font-size: 12px;
  font-weight: 400;
  border-radius: 27px
}
</style>